﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>

</head>
<style>
    body {
        background: #fff;
        overflow: auto;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
    }

    footer {
        display: none;
    }

    .talent {
        width: 98vw;
        max-width: 1300px;
        margin: 10px auto 0;
        display: flex;
    }

    .talent-left {
        width: calc(65% - 20px);
        margin-right: 20px;
    }

    .talent-right {
        width: 35%;
    }

    .talent-left-top {
        background: #fff;
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
    }

    .photo {
        display: flex;
        align-items: flex-end;
    }

    .photo-img {
        background-size: cover;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: #8f8f8f;
    }

    .photo-constellatory {
        background: #e86153;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: #fff;
        position: relative;
        left: -30px;
    }

    .talent-left-top-1 {
        display: flex;
        align-items: flex-start;
    }

    .Name-content {
        margin-left: 15px;
    }

        .Name-content h1 {
            color: #e0301e;
            font-size: 24px;
            margin: 0 0 5px 0;
        }

        .Name-content p {
            font-size: 16px;
            line-height: 20px;
            margin: 0 0 5px 0;
        }

            .Name-content p.Name-title {
                font-size: 14px;
                display: flex;
            }

    .Name-title span {
        color: #d35e1f;
        display: block;
        width: 150px;
    }

    .Name-title-1 {
        margin-top: 10px;
    }

    .edit-button {
        display: flex;
        align-items: flex-end;
        flex-flow: column;
        align-self: flex-end;
    }

        .edit-button button {
            border: solid 1px #e14131;
            color: #e14131;
            background-color: transparent;
            padding: 5px 10px;
            margin-top: 10px;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
        }

        .edit-button i {
            font-size: 16px;
            margin: 0 5px;
        }

    .talent-left-main {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
    }

    .talent-left-main-left {
        width: calc(60% - 30px);
    }

        .talent-left-main-left h3 {
            font-size: 12px;
            font-weight: bold;
            border-bottom: solid 1px #eaeaea;
            padding-bottom: 10px;
            margin: 0;
            color: #404041;
        }

    .talent-left-main-right {
        width: 40%;
    }

    .talent-left-main-right-top {
        font-size: 12px;
        border-bottom: solid 1px #eaeaea;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }

    .talent-left-main-right-top-1 {
        display: flex;
        font-weight: bold;
    }

        .talent-left-main-right-top-1 span {
            color: #bcbcbc;
            display: block;
            margin-left: 3px;
        }

    .talent-left-main-right-top-2 a {
        color: #4d4d44;
        text-decoration: none;
        font-size: 12px;
    }

    .talent-left-main-right-top-2 i {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 5px;
        vertical-align: middle;
        border-top: 3px dashed;
        border-top: 3px solid\9;
        border-right: 3px solid transparent;
        border-left: 3px solid transparent;
    }

    .talent-left-main-right-list ul {
        border: solid 1px #eaeaea;
        overflow: auto;
        max-height: 400px;
    }

        .talent-left-main-right-list ul li {
            display: flex;
            border-top: solid 1px #eaeaea;
            justify-content: space-between;
            padding: 10px 15px;
            flex-flow: column;
        }

            .talent-left-main-right-list ul li:first-child {
                border-top: none;
            }

    .right-list-content {
        display: flex;
        justify-content: space-between;
    }

    .right-list-right {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
    }

        .right-list-right i {
            border-radius: 50%;
            width: 35px;
            height: 35px;
            line-height: 35px;
            background: #ec8f08;
            display: block;
            margin-bottom: 2px;
            color: #fff;
            text-align: center;
            font-size：20px;
        }

        .right-list-right span {
            font-size: 12px;
            color: #ec8f08;
        }

    .right-list-title {
        font-size: 14px;
        margin: 0;
    }

    .right-list-year {
        font-size: 12px;
        color: #8f8f8f;
        margin-top: 5px;
    }

    .right-list-Label {
        margin-top: 5px;
    }

        .right-list-Label span {
            background: #7d7d7d;
            color: #fff;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 25px;
        }

    .talent-right-Title {
        border-bottom: solid 1px #eaeaea;
        font-weight: bold;
        font-size: 14px;
        color: #2d2d2d;
        padding-bottom: 10px;
    }

    .talent-right-1-m {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .talent-right-1-m p {
            width: 16.66%;
            margin: 10px 0;
        }

            .talent-right-1-m p i {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-size: cover;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #eaeaea;
                color: #4d4d44;
                font-style: normal;
            }

                .talent-right-1-m p i a img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-size: cover;
                }

    .talent-right-2 {
        margin-top: 15px;
    }

    .talent-right-2-m {
        overflow: auto;
        max-height: 220px;
        margin-top: 10px;
    }

    .talent-right-2-m-1 {
        color: #bcbcbc;
        display: block;
        margin-bottom: 5px;
    }

        .talent-right-2-m-1 span {
            border-radius: 25px;
            background: #e0301e;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            padding: 5px 10px;
            line-height: 30px;
        }

    .talent-right-2-m-2 {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .talent-left-main-right-tab {
        display: flex;
        position: relative;
        top: 1px;
    }

        .talent-left-main-right-tab p {
            border: solid 1px #eaeaea;
            padding: 3px 5px;
            font-size: 12px;
            margin: 10px 5px 0 0;
            border-bottom: 0;
        }

            .talent-left-main-right-tab p:hover,
            .talent-left-main-right-tab p.PSelected {
                border-color: #e0301e;
                color: #e0301e;
                cursor: pointer;
                border-bottom: solid 1px #fff;
            }

    .right-list-right p {
        text-align: center;
    }

    .Name-content-right {
        margin-left: 30px;
    }

    .talent-left-top-2 {
        border: solid 1px #DEDEDE;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        width: calc(100% - 160px);
    }

    .Name-content h1 {
        font-size: 20px;
    }

    .Name-content p {
        font-size: 14px;
    }

        .Name-content p.Name-title {
            font-size: 12px;
        }
    /*ipad*/

    @media screen and (min-device-width:768px) and (max-device-width: 1366px) {
    }

    @media(max-width:1000px) {
        .talent {
            width: 100%;
            flex-direction: column;
        }

        .talent-left {
            width: 100%;
            margin-right: 0;
        }

        .talent-left-top {
            padding: 10px;
        }

        .Name-title span {
            width: 80px;
        }

        .photo-img {
            width: 100px;
            height: 100px;
        }

        .talent-left-top-2 {
            width: calc(100% - 110px);
            padding: 5px;
            border: none;
            flex-flow: column;
        }

        .Name-content {
            margin-left: 5px;
        }

        .Name-content-right {
            display: block;
            margin: 0;
        }

        .photo-constellatory {
            width: 40px;
            height: 40px;
            left: -30px;
        }

        .edit-button {
            flex-flow: row;
        }

            .edit-button button {
                margin: 10px 5px;
            }

        .talent-left-main {
            flex-flow: column;
        }

        .talent-left-main-left,
        .talent-left-main-right,
        .talent-right {
            width: calc(100% - 20px);
            margin: 0 10px;
            overflow: hidden;
        }

        .talent-right {
            margin-top: 15px;
        }
    }

    .Radar-chart {
        margin-top: 0;
        height: 30vh;
        width: 100%;
    }

    @media(max-width:1000px) {
        .Radar-chart {
            height: 50vh;
            width: 100%;
        }
    }
</style>

<body>
    <div class="loadingoverlay" style="background-color: rgba(255, 255, 255, 0.99); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; background-image: url(&quot;&quot;); background-position: center center; background-repeat: no-repeat; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-size: 100px;"></div>
    <div class="talent" id="talent">
        <div class="talent-left">
            <div class="talent-left-top">
                <div class="talent-left-top-1">
                    <div class="photo">
                        <img class="photo-img" v-bind:src="StaffInfo.icon" />
                    </div>
                </div>
                <div class="talent-left-top-2">
                    <div class="Name-content">
                        <h1>{{StaffInfo.FullName}}</h1>
                        <p><span>{{StaffInfo.BUDesc}}</span><span class="Name-content-right">{{StaffInfo.JobTitle}}</span></p>
                        <p class="Name-title Name-title-1"><span>Extension</span>{{StaffInfo.Phone}}</p>
                        <p class="Name-title"><span>Clity</span>{{StaffInfo.CountryOffice}}</p>
                    </div>
                    <div class="edit-button">
                        <button><i class="mdi mdi-calendar-blank"></i>Sechedule</button>
                        <button><i class="mdi mdi-chart-timeline"></i>Timesheet</button>
                    </div>
                </div>
            </div>
            <div class="talent-left-main">
                <div class="talent-left-main-left">
                    <h3>Skills matrix & competencies</h3>
                    <div class="Radar-chart" id="Radar_chart"></div>
                </div>
                <div class="talent-left-main-right">
                    <div class="talent-left-main-right-top">
                        <div class="talent-left-main-right-top-1">Projects experience</div>
                        <div class="talent-left-main-right-top-2">FY19<i></i></div>
                    </div>
                    <div class="talent-left-main-right-list">
                        <div class="talent-left-main-right-tab">
                            <p v-bind:class="{'PSelected':ProjectType=='Highlights'}" v-on:click="ProjectType='Highlights'">Highlights ({{getProjectTypeCount(1)}}) </p>
                            <p v-bind:class="{'PSelected':ProjectType=='In Progress'}" v-on:click="ProjectType='In Progress'">In Progress ({{getProjectTypeCount(2)}})</p>
                            <p v-bind:class="{'PSelected':ProjectType=='Compeleted'}" v-on:click="ProjectType='Compeleted'">Compeleted ({{getProjectTypeCount(3)}})</p>
                        </div>
                        <ul v-if="ProcessedProjectList.length>0">
                            <li v-for="o in ProcessedProjectList">
                                <p class="right-list-title">{{o.ProjectName}}</p>
                                <div class="right-list-content">
                                    <div class="right-list-right">
                                        <p><i class="mdi mdi-message"></i><span>{{o.ScoreItemAverage1}}</span></p>
                                        <p><i class="mdi mdi-brightness-7"></i><span>{{o.ScoreItemAverage2}}</span></p>
                                        <p><i class="mdi mdi-thumb-up"></i><span>{{o.ScoreItemAverage3}}</span></p>
                                        <p><i class="mdi mdi-stadium"></i><span>{{o.ScoreItemAverage4}}</span></p>
                                        <p><i class="mdi mdi-account-multiple"></i><span>{{o.ScoreItemAverage5}}</span></p>
                                    </div>
                                </div>

                            </li>
                        </ul>
                        <ul v-else stle="min-height: 100px; display: flex;align-items: center;justify-content: center;">
                            No datas.
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="talent-right">
            <div class="talent-right-1">
                <div class="talent-right-Title">Has worked with</div>
                <div class="talent-right-1-m">
                    <p v-for="o in Members"><i><a target="_blank" v-bind:href="o.pageUrl"><img v-bind:src="o.imgUrl" /></a></i></p>
                    <p style="display:none;"><i>21+</i></p>
                </div>
            </div>
            <div class="talent-right-1 talent-right-2">
                <div class="talent-right-Title">Skills and endorsements</div>
                <div class="talent-right-2-m">
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                    <div>
                        <div class="talent-right-2-m-1">
                            <span>Hardware</span> &bull; 8
                        </div>
                        <div class="talent-right-2-m-2">Endorsed by <strong>Mandy Cheung and 10 other mutual connections</strong></div>
                    </div>
                </div>
            </div>
            <div class="talent-right-1 talent-right-2">
                <div class="talent-right-Title">Hobbies and Interests</div>
                <div>

                </div>
            </div>
        </div>
    </div>
    <!--echart.js-->
    <script type="text/javascript" src="/gtsventure/bmsmodular/Admin/HomePage/DownloadFile?fileIds=c9c57c81-dc70-4ea9-9998-f6c7bcff798c"></script>
    <script>
        var organizationCode = "PwCCNHK";
        var requrl = "/gtsventure/bmsmodular/customapi/RetrieveQueryDocs";
        var userUrl = "/gtsventure/bmsmodular/customapi/GetUserInfo";
        var pageUrl = "https://app.digitalmaker.pwchk.com/gtsventure/bmsmodular/PagePreview/StaffInfo?dataid={{0}}";
        var iconUrl = "http://hkapppwv918/ImageWebApi/api/Image/{{0}}?type=1";
        var TotalScoreItem = 10;
        var score = 3;

        function IsNotNull(value) {
            return value !== "" && value !== null && value !== undefined ? true : false;
        };

        function GetScore(value) {
            return value !== "" && value !== null && value !== undefined ? value : 0;
        };

        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return '';
        };
    </script>
    <script>
        var vm = new Vue({
            el: '#talent',
            data: {
                StaffCode: "",
                StaffInfo: {},
                ScoreItemList: [],
                Members: [],
                ProjectType: "Highlights",
                ProjectCount: [0, 0, 0],
                ProjectScoreItemsByGroup: [],
                RadaChatData: [0, 0, 0, 0, 0],
                RadaIndicator: [{
                    text: 'Communication \n& Presentation',
                    max: 5
                }, {
                    text: 'Proactiveness\n',
                    max: 5
                }, {
                    text: 'Business\n Sense',
                    max: 5
                }, {
                    text: 'Mind-set \n& Attitude',
                    max: 5
                }, {
                    text: 'Professional\n Image',
                    max: 5
                }],
            },
            computed: {
                ProcessedProjectList: function() {
                    var list = [];

                    $.each(this.ProjectScoreItemsByGroup, function(i, o) {
                        if (vm.$data.ProjectType == "All") {
                            list.push(o);
                        } else if (vm.$data.ProjectType == "In Progress" && o.ProjectStatus == "Active") {
                            list.push(o);
                        } else if (vm.$data.ProjectType == "Completed" && o.ProjectStatus == "Completed") {
                            list.push(o);
                        } else if (vm.$data.ProjectType == "Highlights" &&
                            o.ScoreItemAverage1 >= score &&
                            o.ScoreItemAverage2 >= score &&
                            o.ScoreItemAverage3 >= score &&
                            o.ScoreItemAverage4 >= score &&
                            o.ScoreItemAverage5 >= score) {
                            list.push(o);
                        }
                    });
                    console.log("list", list);
                    return list;
                },
                getProjectTypeCount: function() {
                    return function(type) {
                        var count = 0;
                        $.each(this.ProjectScoreItemsByGroup, function(i, o) {
                            if (type == 1 && o.ScoreItemAverage1 >= score &&
                                o.ScoreItemAverage2 >= score &&
                                o.ScoreItemAverage3 >= score &&
                                o.ScoreItemAverage4 >= score &&
                                o.ScoreItemAverage5 >= score) {
                                count += 1;
                            }
                            if (type == 2 && o.ProjectStatus == "Active") {
                                count += 1;
                            } else if (type == 3 && o.ProjectStatus == "Completed") {
                                count += 1;
                            }
                        });
                        return count;
                    }
                }
            },
            methods: {
                getUser: function() {
                    var currentUser = CustomCodeResultData.CurrentUser.UserInfo;
                    var StaffCode = currentUser.StaffCode;
                    vm.$data.StaffCode = newStaffCode;

                    var newStaffCode = getUrlParam("dataid");
                    if (newStaffCode == "") {
                        vm.$data.StaffCode = StaffCode;
                        vm.$data.StaffInfo = currentUser;
                        var tempUrl = iconUrl;
                        vm.$data.StaffInfo.icon = tempUrl.replace("{{0}}", currentUser.StaffCode);
                        return;
                    }
                    vm.$data.StaffCode = newStaffCode;
                    console.log("vm.$data.StaffCode", vm.$data.StaffCode);

                    var Jsondata = {
                        staffCode: vm.$data.StaffCode,
                        organizationCode: organizationCode
                    };
                    $.ajax({
                        url: userUrl,
                        type: 'POST',
                        data: Jsondata,
                        async: true,
                        success: function(response) {
                            vm.$data.StaffInfo = response.Data.UserInfo;
                            var tempUrl = iconUrl;
                            vm.$data.StaffInfo.icon = tempUrl.replace("{{0}}", response.Data.UserInfo.StaffCode);
                            console.log("vm.$data.StaffInfo", vm.$data.StaffInfo);
                        }
                    });
                },
                GetScoreItemList: function() {
                    var Jsondata = {};
                    Jsondata.SearchItem = [];
                    Jsondata.EntityName = "4ba7xugno4u";
                    Jsondata.index = 0;
                    Jsondata.size = 100;
                    Jsondata.SearchItem.push({
                        "Name": "IsDeleted",
                        "Value": 0,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    Jsondata.SearchItem.push({
                        "Name": "TargetUserId",
                        "Value": vm.$data.StaffCode,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    $.ajax({
                        url: requrl,
                        type: 'POST',
                        data: Jsondata,
                        async: false,
                        success: function(response) {
                            if (response.StatusCode === 200) {
                                if (response.Data.total > 0) {
                                    $.each(response.Data.rows, function(index, item) {
                                        vm.$data.ScoreItemList.push(item);
                                    });
                                    console.log("ScoreItemList", vm.$data.ScoreItemList);
                                }
                            }
                            return [];
                        }
                    });
                },
                GetProjectList: function() {
                    var tempProjectList = [];
                    $.each(vm.$data.ScoreItemList, function(index, o) {
                        var flag = false;
                        for (i = 0; i < tempProjectList.length; i++) {
                            if (tempProjectList[i] == o.ProjectId) {
                                flag = true;
                                break;
                            }
                        };
                        if (!flag) tempProjectList.push(o.ProjectId);
                    });
                    console.log("tempProjectList", tempProjectList);

                    var tempMembers = [];

                    var ProjectList = [];

                    var Jsondata = {};
                    Jsondata.SearchItem = [];
                    Jsondata.EntityName = "7m2ncu0h5i";
                    Jsondata.index = 0;
                    Jsondata.size = 100;
                    Jsondata.Columns = ["_id", "Status", "AllMembers"];
                    Jsondata.SearchItem.push({
                        "Name": "IsDeleted",
                        "Value": 0,
                        "Operator": 'Equal',
                        'Method': 'AND'
                    });
                    $.ajax({
                        url: requrl,
                        type: 'POST',
                        data: Jsondata,
                        async: false,
                        success: function(response) {
                            if (response.StatusCode === 200) {
                                if (response.Data.total > 0) {
                                    console.log("projects", response.Data.rows);
                                    $.each(response.Data.rows, function(index, item) {
                                        var obj = {
                                            ProjectId: item._id,
                                            Status: item.Status
                                        };
                                        if (tempProjectList.indexOf(item._id) >= 0)
                                            ProjectList.push(obj);
                                        if (item.AllMembers.indexOf(vm.$data.StaffCode) > 0)
                                            $.each(item.AllMembers, function(i, o) {
                                                if (tempMembers.indexOf(o) == -1 && o != "")
                                                    tempMembers.push(o);
                                            });
                                    });
                                    console.log("GetProjectList", ProjectList);
                                }
                            }
                            return [];
                        }
                    });

                    $.each(tempMembers, function(i, o) {
                        var tImgUrl = iconUrl;
                        var tpageUrl = pageUrl;
                        vm.$data.Members.push({
                            imgUrl: tImgUrl.replace("{{0}}", o),
                            pageUrl: tpageUrl.replace("{{0}}", encodeURIComponent(o))
                        });
                    });
                    console.log("vm.$data.Members", vm.$data.Members);
                    return ProjectList;
                },
                GetProjectScoreItems: function() {
                    var tempProjectList = this.GetProjectList();
                    if (vm.$data.ScoreItemList.length == 0) return;
                    $.each(tempProjectList, function(index, o) {
                        var tempList = [];
                        var obj;
                        $.each(vm.$data.ScoreItemList, function(i, k) {
                            if (k.ProjectId == o.ProjectId) {
                                tempList.push(k);
                                obj = {
                                    ProjectId: k.ProjectId,
                                    ProjectName: k.ProjectName,
                                    TargetUserId: k.TargetUserId,
                                    TargetUserName: k.TargetUserName,
                                    ProjectStatus: o.Status
                                };
                            }
                        });

                        obj.count = tempList.length;
                        obj.Creaters = [];
                        for (i = 1; i <= TotalScoreItem; i++) {
                            obj["ScoreItem" + i.toString()] = 0;
                            obj["ScoreItemCount" + i.toString()] = 0;
                            obj["ScoreItemAverage" + i.toString()] = 0;
                        }
                        $.each(tempList, function(i, k) {
                            obj.Creaters.push({
                                CreateById: k["C4-CreateById"],
                                CreateBy: k["C4-CreateBy"]
                            });
                            for (i = 1; i <= TotalScoreItem; i++) {
                                var vl = GetScore(k["ScoreItem" + i.toString()]);
                                obj["ScoreItem" + i.toString()] += vl;
                                obj["ScoreItemCount" + i.toString()] += vl == 0 ? 0 : 1;
                            }

                        });
                        for (i = 1; i <= TotalScoreItem; i++) {
                            var score = obj["ScoreItem" + i.toString()];
                            var count = obj["ScoreItemCount" + i.toString()];
                            var Divisor = count == 0 ? 1 : count;
                            obj["ScoreItemAverage" + i.toString()] = (score / Divisor).toFixed(1) / 1;
                        };

                        vm.$data.ProjectScoreItemsByGroup.push(obj);
                    });

                    console.log("ProjectScoreItemsByGroup", vm.$data.ProjectScoreItemsByGroup);



                    var tpRadar = {};
                    for (i = 1; i <= TotalScoreItem; i++) {
                        tpRadar["ScoreTotal" + i.toString()] = 0;
                        tpRadar["ScoreCount" + i.toString()] = 0;
                    }


                    $.each(vm.$data.ProjectScoreItemsByGroup, function(index, o) {
                        for (i = 1; i <= TotalScoreItem; i++) {
                            tpRadar["ScoreTotal" + i.toString()] += o["ScoreItemAverage" + i.toString()];
                            var count = o["ScoreItemCount" + i.toString()];
                            tpRadar["ScoreCount" + i.toString()] += count == 0 ? 0 : 1;
                        }

                    });

                    for (i = 1; i <= TotalScoreItem; i++) {
                        var count = tpRadar["ScoreCount" + i.toString()];
                        count = count == 0 ? 1 : count;
                        var total = tpRadar["ScoreTotal" + i.toString()];
                        tpRadar["tpRadar" + i.toString()] = (total / count).toFixed(1) / 1;
                    }
                    console.log("tpRadar", tpRadar);

                    vm.$data.RadaChatData = [];
                    for (i = 1; i <= 5; i++) {
                        var index = i + 0;
                        var vl = tpRadar["tpRadar" + index.toString()];
                        vm.$data.RadaChatData.push(vl);
                        vm.$data.RadaIndicator[i - 1].text = vm.$data.RadaIndicator[i - 1].text + " （" + vl + " )";
                    }
                    console.log("vm.$data.RadaChatData", vm.$data.RadaChatData);

                },
                InitRadaChat: function() {
                    var dom = document.getElementById("Radar_chart");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    option = {
                        color: ['#fc9703', '#00ff00', "#0000ff"],
                        radar: [{
                            name: {
                                show: true,
                                formatter: null,
                                textStyle: {
                                    color: '#fc9703',
                                    "fontSize": 11
                                }
                            },
                            indicator: vm.$data.RadaIndicator,
                            center: ['50%', '50%'],
                            radius: 70
                        }],
                        series: [{
                            type: 'radar',
                            tooltip: {
                                trigger: 'item'
                            },
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        type: 'default'
                                    }
                                }
                            },
                            data: [{
                                value: vm.$data.RadaChatData,
                                name: 'Assessment'
                            }]
                        }]
                    };
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                },
                test: function(type) {
                    var count = 0;
                    $.each(this.ProjectScoreItemsByGroup, function(i, o) {
                        if (type == 1 && o.ScoreItemAverage1 >= score &&
                            o.ScoreItemAverage2 >= score &&
                            o.ScoreItemAverage3 >= score &&
                            o.ScoreItemAverage4 >= score &&
                            o.ScoreItemAverage5 >= score) {
                            count += 1;
                        }
                        if (type == 2 && o.ProjectStatus == "Active") {
                            count += 1;
                        } else if (type == 3 && o.ProjectStatus == "Completed") {
                            count += 1;
                        }
                    });
                    return count;
                }
            }
        });

        function init() {
            vm.getUser();
            vm.GetScoreItemList();
            vm.GetProjectScoreItems();
            vm.InitRadaChat();
            $(".loadingoverlay").hide();
        }
        $(function() {
            init();
        });
    </script>

</body>

</html>